<template>
  <el-dialog
    width="500px"
    :title="$t('添加标签')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel"
  >
    <el-row style="margin-bottom: 10px">
      <el-form :model="form" :rules="rules" ref="formRef" size="small" v-show="showSearch">
        <el-form-item prop="tagIds" :label="$t('标签')">
          <el-select
            style="width: 400px"
            v-model="form.tagIds"
            multiple
            :multiple-limit="4"
            filterable
            placeholder="标签"
          >
            <el-option v-for="item in tags" :key="item.value" :label="item.tagName" :value="item.tagId" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>

    <div slot="footer">
      <el-button @click="handleSubmit" v-hasPermi="['distribution:oss:bindTag']" type="primary">
        {{ $t('确定') }}
      </el-button>
      <el-button @click="cancel">
        {{ $t('关闭') }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { ossTagList, bindTag } from '@/api/distribution/sku/imageSpace'

export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      form: {
        tagIds: [],
      },
      rules: {
        tagIds: [{ message: '请输入', required: true, trigger: 'blur' }],
      },
      /**显示搜索条件 */
      showSearch: true,
      tags: [],
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.form.tagIds = this.formData?.tagIdsTemp?.split(',')?.map((i) => +i) || []
        this.getList()
      }
    },
  },
  methods: {
    handleSubmit() {
      // TODO
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          bindTag({
            tagIds: this.form.tagIds.toString(),
            ossId: this.formData.ossId,
          }).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.$emit('getList', false)
              this.cancel()
            }
          })
        }
      })
    },
    getList() {
      ossTagList(this.queryParams).then((res) => {
        this.tags = res.rows
      })
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
